<template>
  <div class="tankuang">
    <el-form label-width="120px" :model="form">
      <div class="ss">
        <el-form-item label="人员姓名" :rules="[{ required: true }]">
          <el-input class="s-1" v-model="form.name" />
        </el-form-item>
        <el-form-item label="联系电话" :rules="[{ required: true }]">
          <el-input class="s-1" v-model="form.phone" />
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="性别">
          <el-select placeholder="--请选择--" v-model="form.sex">
            <el-option
              v-for="item in list6"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <el-select placeholder="--请选择--">
            <el-option label="汉族" />
            <el-option label="苗族" />
          </el-select>
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="学历">
          <el-select placeholder="--请选择--">
            <el-option label="本科" />
            <el-option label="大专" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="18">
            <el-date-picker
              v-model="form.time"
              type="date"
              placeholder="选择日期"
            />
          </el-col>
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="籍贯">
          <el-input class="s-1" />
        </el-form-item>
        <el-form-item label="住址">
          <el-input class="s-1" />
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="紧急联系人">
          <el-input class="s-1" />
        </el-form-item>
        <el-form-item label="紧急联系电话">
          <el-input class="s-1" />
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="所属项目" :rules="[{ required: true }]">
          <el-select placeholder="--请选择--" v-model="form.item">
            <el-option
              v-for="item in list4"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属承建商" :rules="[{ required: true }]">
          <el-select placeholder="--请选择--" v-model="form.contractor">
            <el-option
              v-for="item in list5"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="所在班组" :rules="[{ required: true }]">
          <el-select placeholder="--请选择--" v-model="form.teams">
            <el-option
              v-for="item in list3"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="ss">
        <el-form-item label="工人类型" :rules="[{ required: true }]">
          <el-select placeholder="--请选择--" v-model="form.professionalType">
            <el-option
              v-for="item in list2"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="当前工种" :rules="[{ required: true }]">
          <el-select placeholder="--请选择--" v-model="form.gangwei">
            <el-option
              v-for="item in list1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, defineEmits } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import { useRouter } from "vue-router";
const $router = useRouter();
interface Listflower {
  name: string;
  phone: string;
  professionalType: string;
  gangwei: string;
  teams: string;
  item: string;
  contractor: string;
  sex: string;
  time: string;
}
const form = reactive<Listflower>({
  name: "",
  phone: "",
  professionalType: "",
  gangwei: "",
  teams: "",
  item: "",
  contractor: "",
  sex: "",
  time: "",
});
defineExpose({
  form,
});
const list1 = reactive(["砌筑工", "钢筋工", "架子工", "混凝土工"]);
const list2 = reactive(["管理人员", "建筑人员"]);
const list3 = reactive(["中建八局水泥一队", "_"]);
const list4 = reactive(["XXX项目1", "XXX项目2", "XXX项目3"]);
const list5 = reactive(["中建八局", "中建九局"]);
const list6 = reactive(["男", "女"]);
</script>
<style scoped>
.tankuang {
  position: fixed;
  top: 190px;
  left: 400px;
}
.s-1 {
  width: 200px;
}
.ss {
  display: flex;
  justify-content: center;
}
</style>